<script lang="ts" setup>
import {ref, onMounted} from 'vue'
import axios from 'axios'
import type {LogModel, LogModelArray} from '@/api/model/model'
import {queryLogList} from '@/api/report/log'

onMounted(()=>{
    query();
});

const logList = ref<LogModelArray>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

async function query(){
    const res = await queryLogList(currentPage.value, pageSize.value);
    logList.value = res.data.rows
    total.value = res.data.total
}
function handleSizeChange(){
    query();
}
function handleCurrentChange(){
    query();
}
</script>

<template>
<span class="title">日志管理</span>
<div class="logTable">
  <el-table :data="logList" :show-overflow-tooltip="true" border style="width: 100%">
        <el-table-column prop="operateEmpName" label="操作人" width="100" align="center"/>
        <el-table-column prop="operateTime" label="操作时间" width="200"  align="center"/>
        <el-table-column prop="methodDesc" label="操作描述" width="200"  align="center"/>
        <el-table-column prop="className" label="类名" width="200"  align="center"/>
        <el-table-column prop="methodName" label="方法名" width="100"  align="left"/>
        <el-table-column prop="costTime" label="操作耗时" width="100"  align="center">
            <template #default="scope">
                <el-tag type="danger" v-if="scope.row.costTime > 100">{{scope.row.costTime}}</el-tag>
                <el-tag type="success" v-else>{{scope.row.costTime}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="methodParams" label="请求参数" width="200"  align="center">
            <template #default="scope">
                <el-tag type="primary">{{scope.row.methodParams}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="returnValue" label="返回值"  align="center"/>
   </el-table>
   <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
   </div>
</template>

<style scope>
.title{
    font-size: 20px;
    font-weight: 600;
}
.logTable{
    margin-top: 30px
}


</style>